import React, { Component } from 'react';
import {
  Card,
  Button,
  List,
  Form,
  InputNumber,
  Col,
  Row,
  Input,
  Icon,
  Modal,
} from 'antd';
import { connect } from 'dva';
import { Stage, Layer, Text, Image } from 'react-konva';
import { formatMessage } from 'umi/locale';
import Light1ParamsForm from './hdForms/Light1ParamsForm';
import Light2ParamsForm from './hdForms/Light2ParamsForm';
import Light3ParamsForm from './hdForms/Light3ParamsForm';
import Light4ParamsForm from './hdForms/Light4ParamsForm';

@connect(({ ccc }) => ({ ccc }))
class CutterCamCalImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.ccc.cutterCamSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.ccc.cutterCamSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={1200}
        height={880}
      />
    );
  }
}


@connect(({ ccc }) => ({ ccc }))
@Form.create({})
class CutterCameraCalibration extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    cutterCam1Pos1CalMm: "", // 铡刀标定的时候1号相机点1到铡刀的距离
    cutterCam1Pos2CalMm: "", // 铡刀标定的时候1号相机点2到铡刀的距离
    cutterCam2Pos1CalMm: "", // 铡刀标定的时候2号相机点1到铡刀的距离
    cutterCam2Pos2CalMm: "", // 铡刀标定的时候2号相机点2到铡刀的距离
    cutterDownDis: 0, // 铡刀下降的距离
  };

  cutterDown = e => {
    const { dispatch } = this.props;
    const { cutterDownDis } = this.state;
    dispatch({
      type: "ccc/cutterDown",
      payload: cutterDownDis,
    });
  };

  checkLightPos1 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "ccc/closeCutterCalImageModal"
    });
    dispatch({
      type: "ccc/checkLightPos",
      payload: 1,
    });
  };

  checkLightPos2 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "ccc/closeCutterCalImageModal"
    });
    dispatch({
      type: "ccc/checkLightPos",
      payload: 2,
    });
  };

  checkLightPos3 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "ccc/closeCutterCalImageModal"
    });
    dispatch({
      type: "ccc/checkLightPos",
      payload: 3,
    });
  };

  checkLightPos4 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "ccc/closeCutterCalImageModal"
    });
    dispatch({
      type: "ccc/checkLightPos",
      payload: 4,
    });
  };

  closeCutterImageModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "ccc/closeCutterCalImageModal"
    });
  }

  calCutterCam1Pos1 = e => {
    const { dispatch } = this.props;
    const { cutterCam1Pos1CalMm } = this.state;
    dispatch({
      type: "ccc/calCutterCam1",
      payload: [1, cutterCam1Pos1CalMm]
    });
  }

  calCutterCam1Pos2 = e => {
    const { dispatch } = this.props;
    const { cutterCam1Pos2CalMm } = this.state;
    dispatch({
      type: "ccc/calCutterCam1",
      payload: [2, cutterCam1Pos2CalMm]
    });
  }

  calCutterCam2Pos1 = e => {
    const { dispatch } = this.props;
    const { cutterCam2Pos1CalMm } = this.state;
    dispatch({
      type: "ccc/calCutterCam2",
      payload: [1, cutterCam2Pos1CalMm]
    });
  }

  calCutterCam2Pos2 = e => {
    const { dispatch } = this.props;
    const { cutterCam2Pos2CalMm } = this.state;
    dispatch({
      type: "ccc/calCutterCam2",
      payload: [2, cutterCam2Pos2CalMm]
    });
  }

  verifyCutterCam1Cal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "ccc/verifyCutterCam1Cal",
    });
  }

  verifyCutterCam2Cal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ccc/verifyCutterCam2Cal'
    });
  }

  verifyCutterCamTotal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ccc/verifyCutterCamTotal'
    });
  };

  openCutterCamCalDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ccc/openCutterCamCalDir'
    });
  };

  deleteTotalCutterCalImage = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ccc/deleteTotalCutterCalImage'
    });
  };

  verifyCutterBeginCheck = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ccc/verifyCutterBeginCheck'
    });
  };
  closeCutDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type:'ccc/closeCutDoorAlarm',
    });
  };
  openCutDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type:'ccc/openCutDoorAlarm',
    });
  };

  render() {
    const {
      light1Params,
      light2Params,
      light3Params,
      light4Params,
      cutterCamSrc,
      cutterImageModalVisible,
      hintInfo,
    } = this.props.ccc;


    const { getFieldDecorator, getFieldsValue } = this.props.form;
    return (
      <>
        <Card title="1号相机标定" extra={
          [
            <span style={{ marginLeft: 30 }}>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>此按钮会使铡刀刀片下降,请确保安全.</font>}
            </span>,
            <span style={{ marginLeft: 20 }}>
              下降的距离(mm)
        </span>,
            <Input
              onChange={e => this.setState({ cutterDownDis: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />,
            <Button style={{ marginLeft: 20, marginRight: 100 }} onClick={this.cutterDown}>
              下降铡刀
          </Button>
          ]

        }>
          <Row>
            <span>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>点1标定</font>}
            </span>
            <span style={{ marginLeft: 20 }}>
              到铡刀的距离(mm)
          </span>
            <Input
              onChange={e => this.setState({ cutterCam1Pos1CalMm: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />
            <Button onClick={this.calCutterCam1Pos1} style={{ marginLeft: 10 }}>标定点1</Button>

            <span style={{ marginLeft: 30 }}>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>点2标定</font>}
            </span>
            <span style={{ marginLeft: 20 }}>
              到铡刀的距离(mm)
          </span>
            <Input
              onChange={e => this.setState({ cutterCam1Pos2CalMm: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />
            <Button onClick={this.calCutterCam1Pos2} style={{ marginLeft: 10 }}>标定点2</Button>

            <Button onClick={this.verifyCutterCam1Cal} style={{ marginLeft: 20 }}>
              1号相机标定验证
            </Button>
            <Button style={{ marginLeft: 20 }} onClick={this.openCutterCamCalDir}>
              查看图片目录
              </Button>
            <Button onClick={this.deleteTotalCutterCalImage} style={{ marginLeft: 20 }}>
              删除所有标定用图片
            </Button>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <p>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>1号灯管参数</font>}
              <Button style={{ marginLeft: 20 }} onClick={this.checkLightPos1}>
                验证1号灯管位置选取
              </Button>
            </p>
            <Light1ParamsForm light1Params={light1Params} />
          </Row>
          <Row style={{ marginTop: 10 }}>
            <p>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>2号灯管参数</font>}
              <Button style={{ marginLeft: 20 }} onClick={this.checkLightPos2}>
                验证2号灯管位置选取
              </Button>
            </p>
            <Light2ParamsForm light2Params={light2Params} />
          </Row>
        </Card>
        <Card title="2号相机标定">
          <Row>
            <span>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>点1标定</font>}
            </span>
            <span style={{ marginLeft: 20 }}>
              到铡刀的距离(mm)
          </span>
            <Input
              onChange={e => this.setState({ cutterCam2Pos1CalMm: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />
            <Button onClick={this.calCutterCam2Pos1} style={{ marginLeft: 10 }}>标定点1</Button>

            <span style={{ marginLeft: 30 }}>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>点2标定</font>}
            </span>
            <span style={{ marginLeft: 20 }}>
              到铡刀的距离(mm)
          </span>
            <Input
              onChange={e => this.setState({ cutterCam2Pos2CalMm: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />
            <Button onClick={this.calCutterCam2Pos2} style={{ marginLeft: 10 }}>标定点2</Button>

            <Button onClick={this.verifyCutterCam2Cal} style={{ marginLeft: 20 }}>
              2号相机标定验证
            </Button>
            <Button style={{ marginLeft: 20 }} onClick={this.openCutterCamCalDir}>
              查看图片目录
              </Button>
            <Button onClick={this.deleteTotalCutterCalImage} style={{ marginLeft: 20 }}>
              删除所有标定用图片
            </Button>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <p>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>3号灯管参数</font>}
              <Button style={{ marginLeft: 20 }} onClick={this.checkLightPos3}>
                验证3号灯管位置选取
              </Button>
            </p>
            <Light3ParamsForm light3Params={light3Params} />
          </Row>
          <Row style={{ marginTop: 10 }}>
            <p>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>4号灯管参数</font>}
              <Button style={{ marginLeft: 20 }} onClick={this.checkLightPos4}>
                验证4号灯管位置选取
              </Button>
            </p>
            <Light4ParamsForm light4Params={light4Params} />
          </Row>
        </Card>
        <Card title={"总板长验证"}>
          <Row>
            <Button onClick={this.verifyCutterCamTotal}>
              验证总板长
              </Button>
            <Button onClick={this.verifyCutterBeginCheck} style={{ marginLeft: 20 }}>
              验证起点检测
              </Button>
            <Button style={{ marginLeft: 20 }} onClick={this.openCutterCamCalDir}>
              查看图片目录
              </Button>
            <Button onClick={this.deleteTotalCutterCalImage} style={{ marginLeft: 20 }}>
              删除所有标定用图片
            </Button>
            <Button onClick={this.closeCutDoorAlarm} style={{ marginLeft: 20 }}>
              关闭铡刀门禁报警
            </Button>
            <Button onClick={this.openCutDoorAlarm} style={{ marginLeft: 20 }}>
              打开铡刀门禁报警
            </Button>
          </Row>
        </Card>

        <Modal
          title={'铡刀标定时图片展示'}
          visible={cutterImageModalVisible}
          width={window.screen.availWidth - 50}
          style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0 }}
          closable={true}
          footer={null}
          // closable={true}
          onCancel={this.closeCutterImageModal}
        >
          <Card>
            <Card.Grid style={{ width: '70%', textAlign: "left" }}>
              <Stage width={1200} height={880}>
                <Layer>{cutterCamSrc ? <CutterCamCalImage /> : <Image width={800} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%', textAlign: 'left' }}>
              <Row>
                <p>
                  {<font style={{ color: '#FF0000', fontSize: 16 }}>提示消息: </font>}
                </p>
                <span>
                  {hintInfo}
                </span>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.closeCutterImageModal}>
                  确认OK
              </Button>
                <Button onClick={this.closeCutterImageModal} style={{ marginLeft: 20 }}>
                  重新标定
              </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.openCutterCamCalDir}>
                  查看图片目录
              </Button>
                
              </Row>
              <Row style = {{marginTop:20}}>
              <Button onClick={this.deleteTotalCutterCalImage} >
                  删除所有标定用图片
            </Button>
              </Row>

            </Card.Grid>
          </Card>
        </Modal>
      </>
    );
  }
}
export default CutterCameraCalibration;
